<template>
  <div class="container-big wing-blank forward-active-success-page">
    <div class="forward-active-card">
      <img src="https://img.alicdn.com/tfs/TB1NKCmRxnaK1RjSZFBXXcW7VXa-1380-912.png" class="active-card-bg">
      <div class="forward-active-card-header">
        <p class="forward-active-card-title">
          请凭手机号 {{mobile}}
        </p>
        <p class="forward-active-card-sub-title">
          登录钉钉大会票务系统查收门票
        </p>
        <co-button color="primary" class="active-card-button" @click.stop="goDingtalk">
          打开钉钉 - 查看我的票
        </co-button>
        <p class="foward-active-card-tips">已安装钉钉? 请点此打开钉钉大会票务系统</p>
        <co-button color="outline" class="active-card-button" @click.stop="downloadDingtalk">
          下载钉钉
        </co-button>
        <p class="foward-active-card-tips">未安装钉钉? 请点此下载并安装钉钉</p>
      </div>
      <div class="forward-active-card-content">
        <!-- <img class="forward-active-card-qrcode" src="https://gw.alicdn.com/tfs/TB10uRkICzqK1RjSZPxXXc4tVXa-373-372.png" alt="qrcode" /> -->
        <!-- <p class="forward-active-card-qrcode-desc">
          PC激活可扫码进入钉钉大会票务系统
        </p> -->
        <p>使用说明：</p>
        <p class="card-desc">
          1、已安装钉钉的用户: 点击后将在钉钉大会票务系统中看到⾃己的⼊入场凭证.
        </p>
        <p class="card-desc">
          2、未安装钉钉的⽤户: 需要先安装钉钉, 再⽤购票时预留的手机号登录查看⾃⼰的⼊场凭证.
        </p>
      </div>
    </div>
  </div>
</template>
<script>
// const WAKEUP_LINK =
//   "dingtalk://dingtalkclient/action/switchtab?index=2&name=work&scene=1&corpid=ding3693d292f695a58d35c2f4657eb6378f";
const DOWNLOAD_LINK = "https://www.dingtalk.com/download";
export default {
  data() {
    return {
      mobile: "",
      corpId: ""
    };
  },
  mounted() {
    const { mobile } = this.$route.query;
    const { corpId } = this.$route.query;
    this.mobile = mobile || "-";
    this.corpId = corpId;
  },
  methods: {
    goDingtalk() {
      window.location.href = `dingtalk://dingtalkclient/action/switchtab?index=2&name=work&scene=1&corpid=${
        this.corpId
      }`;
    },
    downloadDingtalk() {
      window.location.href = DOWNLOAD_LINK;
    }
  }
};
</script>

<style lang="less">
.forward-active-success-page {
  padding-top: 30px;
  text-align: left;

  .foward-active-card-tips {
    font-size: 20px;
    margin: 17px 0 0px;
  }

  .forward-active-card {
    padding: 40px 30px 30px;
    position: relative;
    z-index: 1;
    .active-card-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .active-card-button {
      width: 418px;
      height: 72px;
      font-size: 30px;
      font-weight: bold;
      margin-top: 30px;
      > div {
        padding: 0;
      }
    }
  }
  .forward-active-card-header {
    text-align: center;
    color: #fff;
    padding-bottom: 42px;
    border-bottom: 1px dotted #979797;
  }
  .forward-active-card-title {
    font-size: 32px;
  }
  .forward-active-card-sub-title {
    font-size: 28px;
    margin-top: 10px;
  }

  .forward-active-card-content {
    padding-top: 36px;
    font-size: 20px;
    line-height: 30px;
    .card-desc {
      margin-top: 10px;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .forward-active-card-qrcode {
    margin: 0 auto;
    width: 210px;
    height: 210px;
    display: block;
  }

  .forward-active-card-qrcode-desc {
    text-align: center;
    font-size: 20px;
    margin-top: 18px;
    margin-bottom: 26px;
  }
}
</style>
